<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="700"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <div class="viewModa">
            <div
                class="viewModa-item"
                v-for="(item, index) in formState.templateList"
                :key="index"
                :style="{
                    height: item.note.height + 'px',
                    width: item.note.width + 'px',
                    top: item.note.top + 'px',
                    left: item.note.left + 'px',
                }"
                @click.stop="tempItem(index)"
            >
                <a-image v-if="item.imageUrl" :width="item.note.width" :height="item.note.height" :src="item.imageUrl" />
                <!-- <img style="width: 100%; height: 100%" :src="item.imageUrl" alt="" /> -->
                <div class="bg" v-if="tempkey !== index" @click.stop="tempItem(index)"></div>
            </div>
        </div>
        <div style="width: 200px; margin: 10px auto">
            <a-select style="width: 200px" v-model:value="formState.goodId" @change="goodFun">
                <a-select-option :value="item.id" v-for="(item, index) in goodList" :key="index">{{ item.name }}</a-select-option>
            </a-select>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { getTemplate } from '@/api/templates';
import { getskuGoodsSku } from '@/api/goods';
import { AppPreviewBindingImage } from '@/api/device/deviceApps';
// 表单校验规则
const initRules = (t: fn) => {
    return {
        relationTemplateCode: [{ required: true, message: t('yl.pleaseInputUsername'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'viewModel',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        templateCode: {
            type: String,
            default: () => '',
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        console.log(props);
        const { t } = useI18n();
        const showModal = computed(() => props.visible);
        const formState = reactive({
            templateCode: props.templateCode,
            templateList: [],
            goodId: '',
        });
        const goodList: any = ref([]);
        const tempkey = ref(0);
        onMounted(() => {
            TemplateFun();
            getskuGoodsSkuList();
        });

        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        const TemplateFun = () => {
            getTemplate(formState.templateCode).then((res) => {
                let list = res.content.templateCommons;
                console.log(list);
                list.forEach((item: any) => {
                    item.note = JSON.parse(item.note);
                    item.imageUrl = '';
                    console.log(item.note);
                });
                formState.templateList = list;
            });
        };
        // 获取表格数据
        const getskuGoodsSkuList = async () => {
            const { content, totalElements } = await getskuGoodsSku({
                page: 0,
                size: 999,
                sort: 'id,desc',
                blurry: '',
            });
            goodList.value = content;
        };
        // 提交
        const onSubmit = () => {
            console.log(formState);
            formRef.value.validate().then(() => {});
        };

        // 取消
        const handleCancle = () => {
            return emit('submit', 'cancle');
        };
        const tempItem = (index: number) => {
            tempkey.value = index;
        };
        const goodFun = (val: any) => {
            let index = formState.templateList[tempkey.value];
            console.log(index);
            let data = {
                goodsId: val,
                height: index.note.height,
                templateCommonId: index.templateCommonId,
                width: index.note.width,
            };
            console.log(data);
            AppPreviewBindingImage(data).then((res) => {
                console.log(res);
                index.imageUrl = res.content;
                formState.goodId = '';
            });
        };
        return {
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            showModal,
            formState,
            t,
            rules,
            onSubmit,
            handleCancle,
            TemplateFun,
            tempkey,
            tempItem,
            getskuGoodsSkuList,
            goodList,
            goodFun,
        };
    },
});
</script>
<style lang="scss">
.viewModa {
    position: relative;
    width: 640px;
    height: 400px;
    overflow: auto;
    border: 1px solid #f1f1f1;
    .viewModa-item {
        position: absolute;
        border: 1px solid #f1f1f1;
        background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/20px 20px,
            linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0) 0 0/20px 20px;
        .ant-image-img,
        .ant-image {
            height: 100%;
        }
    }
    .bg {
        cursor: pointer;
    }
}
</style>
